{% extends "apostrophe-modal:base.html" %}
{% import "apostrophe-modal:batch.html" as batch %}
{% import 'apostrophe-ui:components/buttons.html' as buttons %}

{% block modalClass %}apos-reorganize-modal{% if not data.trashInSchema %}{{ ' apos-separate-trash' }}{% endif %}{% endblock %}

{% block controls %}
  <div class="apos-modal-controls">
    {{ buttons.minor('Finished', { action: 'save' }) }}
    {{ buttons.major('New Page', { action: 'insert-page' }) }}
  </div>
{% endblock %}

{% block label %}
{{ __ns('apostrophe', 'Reorganize Pages') }}
{% endblock %}

{% block instructions %}
  <p>
    {{ __ns('apostrophe', 'Drag and drop pages wherever they need to go.') }}
  </p>
{% endblock %}

{% block body %}
  <div class="apos-reorganize-tree-header">
    <input class="apos-reorganize-select-all" type="checkbox" name="select-all" value="1" />
    <span class="apos-reorganize-title">Page Title</span>
    <span class="apos-reorganize-controls">Published</span>
    <span class="apos-reorganize-controls">Edit</span>
    <span class="apos-reorganize-controls">Link</span>
    <span class="apos-reorganize-controls">Trash</span>
  </div>
  {# This gets fired up by jstree #}
  <div class="apos-table apos-reorganize-tree" data-tree>
  </div>
{% endblock %}

{% block footer %}
  <div class="apos-modal-footer-inner">
    {%- block batch -%}
      {{ batch.operations(data.batchOperations) }}
    {%- endblock -%}
  </div>
{%- endblock -%}
